//Paths
@img-path: 		"../img"; 
@fonts-path: 	"../lib"; 
@lib-path: 		"../lib"; 

//General colors palette
@primary-color: saturate(#e66b6b, 10%);
@alt-color1: 		#95d9f0;
@alt-color2: 		#ffdc7a;
@alt-color3: 		#7a98bf;
@alt-color4: 		#cccccc;

@dark-color: 		#3d3c3c;
@light-color: 	#ffffff;
@black-color: 	#000000;
@body-color: 		#555555;

//States Color
@success-color: #7ACCBE;
@warning-color: #FFC870;
@danger-color: 	#EF6262;
@info-color: 		#8dcadf;
@grey-color: 			#cccccc;

//Color variations
@import "colors.less";

//General elements
@full-logo-width: 				150px;
@full-logo-height: 				39px;
@small-logo-width: 				67px;
@small-logo-height: 			39px;
@body-background: 				darken(@light-color, 6%);
@content-padding: 				35px;
@content-padding-tablet: 	25px;
@content-padding-phone: 	15px;
@link-color: 							(@primary-color + 10%);
@scroller-width: 					6px;//Scroller plugin width

//Aside
@page-aside-width: 			280px;
@page-aside-padding: 		20px;

//Sticky footer
@footer-height: 				50px;	
@footer-padding-h: 			@content-padding;	
@footer-padding-v: 			15px;	

//Top Header
@top-header-height: 									80px;
@top-header-height-phone: 						70px;
@top-header-icons-dropdown-width: 		300px;
@top-header-icons-size: 							28px;
@top-header-user-profile-image-size: 	43px;

//Left Sidebar
@left-sidebar-bg: 									@dark-color;
@left-sidebar-width: 								100px;
@left-sidebar-submenu-width: 				280px;
@left-sidebar-width-phone: 					85%;
@left-sidebar-color: 								darken(@light-color, 11.8%);
@left-sidebar-color-sub-item: 			darken(@light-color, 30%);
@left-sidebar-background-sub-item: 	lighten(@dark-color, 4.3%);
@left-sidebar-hover-item: 					lighten(@dark-color, 2%);
@left-sidebar-logo-bg: 							darken(@dark-color, 1.5%);
@left-sidebar-main-level-font-size: 12px;

//Right Sidebar
@right-sidebar-width: 							255px;
@right-sidebar-width-phone: 				85%;
@right-sidebar-icons-color: 				darken(@light-color, 33.2%);
@right-sidebar-color: 							darken(@light-color, 11.8%);
@right-sidebar-low-contrast-color: 	darken(@light-color, 30%);
@right-sidebar-background: 					lighten(@dark-color, 4.3%);
@right-sidebar-dark-color: 					lighten(@dark-color, 2%);

//Fonts
@raleway-path: 						"@{fonts-path}/raleway";
@raleway: 								'Raleway', sans-serif;
@open-sans-path: 					"@{fonts-path}/open-sans";
@open-sans: 							'Open Sans', sans-serif;
@icons-font:							'Stroke 7';

@font-size-base:        	13px;
@font-size-large:         ceil((@font-size-base * 1.15)); // ~18px
@font-size-small:         ceil((@font-size-base * 0.85)); // ~12px
@font-size-extra-small:   ceil((@font-size-base * 0.8)); // ~12px

@font-weight-thin: 					100;
@font-weight-light: 				300;
@font-weight-regular: 			400;
@font-weight-medium: 				500;
@font-weight-bold: 					700;
@font-weight-black: 				900;

@font-size-h1:            floor((@font-size-base * 2.6)); // ~36px
@font-size-h2:            floor((@font-size-base * 2.15)); // ~30px
@font-size-h3:            ceil((@font-size-base * 1.7)); // ~24px
@font-size-h4:            ceil((@font-size-base * 1.25)); // ~18px
@font-size-h5:            @font-size-base;
@font-size-h6:            ceil((@font-size-base * 0.85)); // ~12px

@paragraph-font-size: 		inherit;
@paragraph-line-height: 	21px;

//Both sidebars
@sidebars-hardware-accelerated-animation: true;
@sidebars-push-effect: all .35s ease;

//Forms
@input-check-component-size: 				22px;

//Form validation states
@form-validation-icon-size: 		 		21px;

//Dropdowns
@dropdown-text-color: lighten(@dark-color, 7.2%);

//Panels & Widget Panels
@panel-body-padding:          			15px 20px 20px;
@panel-heading-horizontal-padding:  20px;
@panel-heading-top-padding:   		 	20px;
@panel-heading-bottom-padding:    	15px;
@panel-heading-padding:       			@panel-heading-top-padding @panel-heading-horizontal-padding @panel-heading-bottom-padding;
@panel-heading-font-size: 					18px;
@panel-heading-font-weight: 				300;
@widget-heading-font-size: 					16px;
@widget-heading-font-weight: 				300;

//Dividers
@divider-border: 								 1px solid darken(@light-color, 5%);
@divider-margin: 								 10px;
@divider-lg-margin: 						 15px;
@divider-xl-margin: 						 20px;

//Buttons
@btn-font-weight:                normal;
@btn-icon-margin:								 3px;	

@btn-default-color:              @text-color;
@btn-default-bg:                 #fff;
@btn-default-border:             #dedede;

@btn-primary-color:              #fff;
@btn-primary-bg:                 @brand-primary;
@btn-primary-border:             darken(@btn-primary-bg, 5%);

@btn-dark-color:              	 #fff;
@btn-dark-bg:                 	 @dark-color;
@btn-dark-border:             	 darken(@btn-dark-bg, 5%);

@btn-success-color:              #fff;
@btn-success-bg:                 @brand-success;
@btn-success-border:             darken(@btn-success-bg, 5%);

@btn-info-color:                 #fff;
@btn-info-bg:                    @brand-info;
@btn-info-border:                darken(@btn-info-bg, 5%);

@btn-warning-color:              #fff;
@btn-warning-bg:                 @brand-warning;
@btn-warning-border:             darken(@btn-warning-bg, 5%);

@btn-danger-color:               #fff;
@btn-danger-bg:                  @brand-danger;
@btn-danger-border:              darken(@btn-danger-bg, 5%);

@btn-alt1-color:								 #fff;
@btn-alt1-bg:                 	 @alt-color1-text;
@btn-alt1-border:              	 darken(@btn-alt1-bg, 5%);

@btn-alt2-color:								 #fff;
@btn-alt2-bg:                 	 @alt-color2-text;
@btn-alt2-border:              	 darken(@btn-alt2-bg, 5%);

@btn-alt3-color:								 #fff;
@btn-alt3-bg:                 	 @alt-color3-text;
@btn-alt3-border:              	 darken(@btn-alt3-bg, 5%);

@btn-alt4-color:								 #fff;
@btn-alt4-bg:                 	 @alt-color4-text;
@btn-alt4-border:              	 darken(@btn-alt4-bg, 5%);

@btn-link-disabled-color:        @gray-light;

//Alerts
@alert-icon-width: 						55px;

//Progress bars
@progress-bar-height: 				22px;	

//Status color
@status-online: 							#00b777;
@status-offline: 							#e65a5a;
@status-away: 								#f2c329;

//Chat component
@chat-min-height: 						350px;
@chat-messages-height: 				274px;

// Pages

//Timeline
@timeline-max-width: 					840px;
@timeline-left-padding: 			210px;
@timeline-vbar-position: 			@timeline-left-padding - 40px;// From timeline-item element to left
@timeline-margin-helper:			10px; //Helper to thumbnails whitout damage timeline content size
@timeline-avatar-size: 				35px;
@timeline-content-min-height: 85px;
@timeline-header-line-height: 21px;
@timeline-header-padding-top: (@timeline-avatar-size - @timeline-header-line-height) / 2;
@timeline-content-vpadding: 	25px;
@timeline-date-width: 				@timeline-vbar-position - 25px;
@timeline-date-position: 			ceil(@timeline-content-vpadding + @timeline-header-padding-top) + 2px;
@timeline-tail-size: 					10px;
@timeline-tail-position:			ceil(@timeline-content-min-height - @timeline-tail-size) / 2;
@timeline-bubble-size:				16px;
@timeline-bubble-position:		ceil(@timeline-content-min-height - @timeline-bubble-size) / 2;
@timeline-icon-size:					44px;
@timeline-icon-border-width:	2px;
@timeline-icon-position:			floor((@timeline-content-min-height - @timeline-icon-size) / 2);

//Invoice
@invoice-page-padding:									100px 100px 70px;
@invoice-tablet-padding:								50px 50px 35px;
@invoice-small-phone-padding:						35px 25px 15px;
@invoice-logo-height:										54px;
@invoice-logo-width:										206px;
@invoice-logo-tablet-height:						34px;
@invoice-logo-tablet-width:							144px;
@invoice-header-margin:									100px;
@invoice-id-fontsize:										30px; 
@invoice-id-lineheight:									@invoice-id-fontsize;
@invoice-data-margin:										110px;
@invoice-person-fontsize:								18px;
@invoice-person-lineheight:							26px;
@invoice-direction-height:							130px;
@invoice-direction-bubble-size:					80px;
@invoice-details-fontsize:							16px;
@invoice-payment-fontsize:							18px;
@invoice-payment-lineheight:						26px;
@invoice-payment-margin:								75px;
@invoice-message-fontsize:							16px;
@invoice-message-lineheight:						26px;
@invoice-message-margin:								62px;
@invoice-company-info-margin:						70px;

//Pricing tables
@pricing-tables-margin: 						30px 0 20px;
@pricing-table-border-radius: 			@panel-border-radius;
@pricing-table-horizontal-space: 		10px;
@pricing-table-padding: 						35px 20px;
@pricing-table-margin: 							0 0 20px;
@pricing-table-divider-size: 				30px;
@pricing-table-value-size: 					60px;
@pricing-table-price-line-height: 	40px;
@pricing-table-frecuency-size: 			20px;
@pricing-table-fatures-line-height: 33px;
@pricing-table-button-height: 			23px;
@pricing-table-button-min-width: 		120px;

// Plugins

//Nifty Modals
@modal-prefix: 								modal;
@modal-zindex: 								@zindex-modal;

//Gritter Notifications
@notification-width: 					360px;
@notification-top-position: 	82px;

//Social colors
@facebook: 		#5d82d1;
@twitter: 		#50bff5;
@google-plus: #eb5e4c;
@dribbble: 		#f7659c;
@youtube: 		#ef4e41;
@flickr: 			#0063dc;
@yahoo: 			#ab47ac;
@linkedin: 		#238cc8;
@pinterest: 	#e13138;
@github: 			#333;
@tumblr: 			#426d9b;

//Responsive Variables
@desktop: 		~"(min-width: @{screen-lg})";
@laptop: 			~"(min-width: @{screen-md}) and (max-width: @{screen-md-max})";
@tablet: 			~"(min-width: @{screen-sm}) and (max-width: @{screen-sm-max})";
@phone: 			~"(max-width: @{screen-xs-max})";
@small-phone: ~"(max-width: @{screen-xs})";

//Non responsive devices
@non-responsive: ~"(min-width: @{screen-sm})";

//Retina Display
@retina: ~"(-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)";
@high-dpi: ~"only screen and (-webkit-min-device-pixel-ratio: 1.3), only screen and (-o-min-device-pixel-ratio: 13/10), only screen and (min-resolution: 120dpi)";

//Google Chrome Query
@webkit: ~"screen and (-webkit-min-device-pixel-ratio:0)";

//IE8 Media Query
@ie8: ~"\0screen";

//IE9 & IE10 Media Query
@ie910: ~"screen and (min-width:0\0)";

//IE 10+ Media Query
@ie10: ~"all and (-ms-high-contrast: none), (-ms-high-contrast: active)";